TypeScript WebSocket: Turi Xavfsizligi bilan Real-time Muloqotni Yuksaltirish

            
// types.ts

// Matnli xabar yuborish uchun interfeys
export interface SendMessagePayload {
  roomId: string;
  message: string;
}

// Xonaga qo'shilish uchun interfeys
export interface JoinRoomPayload {
  roomId: string;
  userId: string;
}

// Kliyentdan serverga yuborilishi mumkin bo'lgan barcha xabarlar uchun birlashma turi
export type ClientToServerEvent = 
  | { type: 'SEND_MESSAGE', payload: SendMessagePayload }
  | { type: 'JOIN_ROOM', payload: JoinRoomPayload };

            

              
                Copy
              
            
          

            
// types.ts (davomi)

// Chat xonasida qabul qilingan xabar uchun interfeys
export interface ChatMessage {
  id: string;
  roomId: string;
  senderId: string;
  content: string;
  timestamp: number;
}

// Foydalanuvchi xonaga qo'shilganligi haqidagi bildirishnoma uchun interfeys
export interface UserJoinedRoomPayload {
  userId: string;
  roomId: string;
  timestamp: number;
}

// Serverdan kliyentga yuborilishi mumkin bo'lgan barcha xabarlar uchun birlashma turi
export type ServerToClientEvent = 
  | { type: 'NEW_MESSAGE', payload: ChatMessage }
  | { type: 'USER_JOINED', payload: UserJoinedRoomPayload }
  | { type: 'ERROR', payload: { message: string } };

            

              
                Copy
              
            
          

            
// server.ts

import WebSocket, { WebSocketServer } from 'ws';
import { ClientToServerEvent, ServerToClientEvent, ChatMessage, JoinRoomPayload, SendMessagePayload } from './types'; // types.ts fayli bir xil papkada deb taxmin qilinadi

const wss = new WebSocketServer({ port: 8080 });

console.log('WebSocket serveri 8080 portida ishga tushdi');

wss.on('connection', (ws: WebSocket) => {
  console.log('Kliyent ulandi');

  ws.on('message', (message: string) => {
    try {
      const parsedMessage: ClientToServerEvent = JSON.parse(message);

      switch (parsedMessage.type) {
        case 'SEND_MESSAGE':
          handleSendMessage(ws, parsedMessage.payload);
          break;
        case 'JOIN_ROOM':
          handleJoinRoom(ws, parsedMessage.payload);
          break;
        default:
          console.warn('Noma\'lum xabar turi qabul qilindi:', parsedMessage);
          sendError(ws, 'Noma\'lum xabar turi');
      }
    } catch (error) {
      console.error('Xabarni tahlil qilishda xato:', error);
      sendError(ws, 'Yaroqsiz JSON qabul qilindi');
    }
  });

  ws.on('close', () => {
    console.log('Kliyent uzildi');
  });

  ws.on('error', (error) => {
    console.error('WebSocket xatosi:', error);
  });

  // Kliyentga xush kelibsiz xabarini yuborish
  sendServerMessage(ws, { type: 'SYSTEM_INFO', payload: { message: 'Real-time serveriga xush kelibsiz!' } });
});

// Serverdan kliyentga xabar yuborish uchun yordamchi funksiya
function sendServerMessage(ws: WebSocket, message: ServerToClientEvent): void {
  ws.send(JSON.stringify(message));
}

// Kliyentga xatolarni yuborish uchun yordamchi funksiya
function sendError(ws: WebSocket, errorMessage: string): void {
  sendServerMessage(ws, { type: 'ERROR', payload: { message: errorMessage } });
}

// Maxsus xabar ishlovchilari
function handleSendMessage(ws: WebSocket, payload: SendMessagePayload): void {
  console.log(`${payload.roomId} xonasida xabar qabul qilindi: ${payload.message}`);
  // Haqiqiy ilovada siz buni xonadagi boshqa foydalanuvchilarga tarqatasiz
  const newMessage: ChatMessage = {
    id: Date.now().toString(), // Oddiy ID yaratish
    roomId: payload.roomId,
    senderId: 'anonymous', // Haqiqiy ilovada bu autentifikatsiyadan keladi
    content: payload.message,
    timestamp: Date.now()
  };
  // Misol: Barcha kliyentlarga tarqatish (xonaga xos tarqatish bilan almashtiring)
  wss.clients.forEach(client => {
    if (client !== ws && client.readyState === WebSocket.OPEN) {
      sendServerMessage(client, { type: 'NEW_MESSAGE', payload: newMessage });
    }
  });
  // Ixtiyoriy ravishda yuboruvchiga tasdiqnoma yuborish
  sendServerMessage(ws, { type: 'MESSAGE_SENT', payload: { messageId: newMessage.id } });
}

function handleJoinRoom(ws: WebSocket, payload: JoinRoomPayload): void {
  console.log(`Foydalanuvchi ${payload.userId} ${payload.roomId} xonasiga qo'shilmoqda`);
  // Haqiqiy ilovada siz xona obunalarini boshqarasiz va ehtimol boshqalarga tarqatasiz
  const userJoinedNotification: UserJoinedRoomPayload = {
    userId: payload.userId,
    roomId: payload.roomId,
    timestamp: Date.now()
  };
  // Xonadagi boshqalarga tarqatish (misol)
  wss.clients.forEach(client => {
    // Bu qaysi kliyent qaysi xonada ekanligini bilish uchun mantiqni talab qiladi
    // Sodda bo'lishi uchun, bu yerda misol tariqasida hammaga yuboramiz
    if (client.readyState === WebSocket.OPEN) {
      sendServerMessage(client, { type: 'USER_JOINED', payload: userJoinedNotification });
    }
  });
}

// To'liqlik uchun faraziy SYSTEM_INFO xabar turi uchun ishlovchi qo'shish
// Bu serverning tuzilgan ma'lumotlarni qanday yuborishi mumkinligiga misol
// Eslatma: Yuqoridagi `sendServerMessage` chaqiruvida biz allaqachon 'SYSTEM_INFO' turini qo'shdik
// Biz buni aniqlik uchun bu yerda belgilaymiz, garchi u dastlabki `ServerToClientEvent` birlashmasining bir qismi bo'lmasa ham
// Haqiqiy ilovada barcha belgilangan turlar birlashmaning bir qismi ekanligiga ishonch hosil qilasiz
interface SystemInfoPayload {
  message: string;
}

// Yuqoridagi kodni kompilyatsiya qilish uchun SYSTEM_INFO'ni ServerToClientEvent'ga qo'shishimiz kerak
// Bu misol uchun, u qo'shilgan deb faraz qilaylik:
// export type ServerToClientEvent = ... | { type: 'SYSTEM_INFO', payload: SystemInfoPayload };

// Bu izchil tur ta'riflariga bo'lgan ehtiyojni ko'rsatadi.

            

              
                Copy
              
            
          

            
// client.ts

import { ClientToServerEvent, ServerToClientEvent, ChatMessage, UserJoinedRoomPayload } from './types'; // types.ts fayli bir xil papkada deb taxmin qilinadi

const socket = new WebSocket('ws://localhost:8080');

// WebSocket ulanishi uchun voqea ishlovchilari

socket.onopen = () => {
  console.log('WebSocket ulanishi o\'rnatildi');
  // Misol: Ulanishdan so'ng xonaga qo'shilish
  const joinRoomMessage: ClientToServerEvent = {
    type: 'JOIN_ROOM',
    payload: { roomId: 'general', userId: 'user123' }
  };
  sendMessage(joinRoomMessage);
};

socket.onmessage = (event) => {
  try {
    const message: ServerToClientEvent = JSON.parse(event.data as string);

    switch (message.type) {
      case 'NEW_MESSAGE':
        handleNewMessage(message.payload);
        break;
      case 'USER_JOINED':
        handleUserJoined(message.payload);
        break;
      case 'ERROR':
        console.error('Server xatosi:', message.payload.message);
        break;
      case 'SYSTEM_INFO':
        console.log('Tizim:', message.payload.message);
        break;
      case 'MESSAGE_SENT':
        console.log('Xabar muvaffaqiyatli yuborildi, ID:', message.payload.messageId);
        break;
      default:
        console.warn('Noma\'lum server xabari turi qabul qilindi:', message);
    }
  } catch (error) {
    console.error('Server xabarini tahlil qilishda xato:', error);
  }
};

socket.onclose = (event) => {
  if (event.wasClean) {
    console.log(`Ulanish toza yopildi, kod=${event.code} sabab=${event.reason}`);
  } else {
    console.error('Ulanish uzildi');
  }
};

socket.onerror = (error) => {
  console.error('WebSocket xatosi:', error);
};

// Kliyentdan serverga xabar yuborish funksiyasi
function sendMessage(message: ClientToServerEvent): void {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify(message));
  } else {
    console.warn('WebSocket ochiq emas. Xabar yuborib bo\'lmadi.');
  }
}

// Ulanishdan so'ng chat xabari yuborish misoli
function sendChatMessage(room: string, text: string) {
  const message: ClientToServerEvent = {
    type: 'SEND_MESSAGE',
    payload: { roomId: room, message: text }
  };
  sendMessage(message);
}

// Kliyentdagi xabar ishlovchilari
function handleNewMessage(message: ChatMessage): void {
  console.log(`
--- ${message.roomId} xonasida yangi xabar ---
Kimdan: ${message.senderId}
Vaqt: ${new Date(message.timestamp).toLocaleTimeString()}
Mazmuni: ${message.content}
---------------------------
`);
  // UI'ni yangi xabar bilan yangilash
}

function handleUserJoined(payload: UserJoinedRoomPayload): void {
  console.log(`Foydalanuvchi ${payload.userId} ${payload.roomId} xonasiga ${new Date(payload.timestamp).toLocaleTimeString()} da qo'shildi`);
  // Yangi foydalanuvchini xonada ko'rsatish uchun UI'ni yangilash
}

// Foydalanish misoli:
// setTimeout(() => {
//   sendChatMessage('general', 'Salom, dunyo!');
// }, 3000);

            

              
                Copy
              
            
          

            
// types.ts (kengaytirilgan)

// Har qanday serverdan-kliyentga voqea uchun umumiy interfeys
export interface ServerEvent {
  type: string;
  payload: T;
}

// Generiklarni yashirincha ishlatgan holda yangilangan ServerToClientEvent
export type ServerToClientEvent = 
  | ServerEvent & { type: 'NEW_MESSAGE' }
  | ServerEvent & { type: 'USER_JOINED' }
  | ServerEvent<{ message: string }> & { type: 'ERROR' }
  | ServerEvent<{ message: string }> & { type: 'SYSTEM_INFO' }
  | ServerEvent<{ messageId: string }> & { type: 'MESSAGE_SENT' };

// Kliyent tomonida generiklar yordamida qabul qiluvchi funksiya misoli
function handleServerMessage(event: MessageEvent, expectedType: string, handler: (payload: T) => void): void {
  try {
    const rawMessage = JSON.parse(event.data as string) as ServerEvent;
    if (rawMessage.type === expectedType) {
      handler(rawMessage.payload as T);
    }
  } catch (error) {
    console.error(`${expectedType} turidagi xabarni qayta ishlashda xato:`, error);
  }
}

// client.ts da foydalanish:
// socket.onmessage = (event) => {
//   handleServerMessage(event, 'NEW_MESSAGE', handleNewMessage);
//   handleServerMessage(event, 'USER_JOINED', handleUserJoined);
//   handleServerMessage<{ message: string }>(event, 'ERROR', (payload) => {
//     console.error('Server xatosi:', payload.message);
//   });
//   // ... va hokazo
// };

            

              
                Copy
              
            
          

            
// WebSocketService.ts

import { EventEmitter } from 'events';
import { ClientToServerEvent, ServerToClientEvent } from './types';

interface WebSocketServiceOptions {
  url: string;
  reconnectInterval?: number;
  maxReconnectAttempts?: number;
}

export class WebSocketService extends EventEmitter {
  private socket: WebSocket | null = null;
  private url: string;
  private reconnectInterval: number;
  private maxReconnectAttempts: number;
  private reconnectAttempts: number = 0;
  private isConnecting: boolean = false;

  constructor(options: WebSocketServiceOptions) {
    super();
    this.url = options.url;
    this.reconnectInterval = options.reconnectInterval || 5000;
    this.maxReconnectAttempts = options.maxReconnectAttempts || 10;
  }

  connect(): void {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      console.log('Allaqaqchon ulangan.');
      return;
    }
    if (this.isConnecting) {
        console.log('Ulanish jarayonda...');
        return;
    }

    this.isConnecting = true;
    console.log(`${this.url} ga ulanishga urinilmoqda...`);
    this.socket = new WebSocket(this.url);

    this.socket.onopen = this.onOpen;
    this.socket.onmessage = this.onMessage;
    this.socket.onclose = this.onClose;
    this.socket.onerror = this.onError;
  }

  private onOpen = (): void => {
    console.log('WebSocket ulanishi o\'rnatildi.');
    this.reconnectAttempts = 0; // Muvaffaqiyatli ulanishda qayta ulanish urinishlarini tiklash
    this.isConnecting = false;
    this.emit('open');
  };

  private onMessage = (event: MessageEvent): void => {
    try {
      const message = JSON.parse(event.data as string) as ServerToClientEvent;
      this.emit('message', message);
    } catch (error) {
      console.error('Xabarni tahlil qilishda xato:', error);
      this.emit('error', new Error('Yaroqsiz JSON qabul qilindi'));
    }
  };

  private onClose = (event: CloseEvent): void => {
    console.log(`WebSocket ulanishi yopildi. Kod: ${event.code}, Sabab: ${event.reason}`);
    this.isConnecting = false;
    this.emit('close', event);
    if (event.code !== 1000) { // 1000 - normal yopilish
      this.reconnect();
    }
  };

  private onError = (error: Event): void => {
    console.error('WebSocket xatosi:', error);
    this.isConnecting = false;
    this.emit('error', error);
    // Barcha xatolarda avtomatik qayta ulanmang, agar iloji bo'lsa, xato turiga bog'liq
  };

  private reconnect(): void {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.error('Maksimal qayta ulanish urinishlariga erishildi. To\'xtatilmoqda.');
      this.emit('maxReconnects');
      return;
    }

    this.reconnectAttempts++;
    console.log(`Qayta ulanishga urinilmoqda (${this.reconnectAttempts}/${this.maxReconnectAttempts}) ${this.reconnectInterval}ms dan so'ng...`);
    setTimeout(() => {
      this.connect();
    }, this.reconnectInterval);
  }

  send(message: ClientToServerEvent): void {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify(message));
    } else {
      console.warn('WebSocket ochiq emas. Xabar yuborilmadi.');
      // Ixtiyoriy ravishda xabarlarni navbatga qo'yish yoki xatolik chiqarish
    }
  }

  close(): void {
    if (this.socket) {
      this.socket.close();
    }
  }
}

// Ilovangizning komponent/modulida foydalanish misoli:
// import { WebSocketService } from './WebSocketService';
// 
// const wsService = new WebSocketService({ url: 'ws://localhost:8080', reconnectInterval: 3000 });
// 
// wsService.on('open', () => {
//   console.log('Ulandi!');
//   wsService.send({ type: 'SEND_MESSAGE', payload: { roomId: 'general', message: 'Servisdan salom!' } });
// });
// 
// wsService.on('message', (message: ServerToClientEvent) => {
//   console.log('Servis orqali qabul qilindi:', message);
//   if (message.type === 'NEW_MESSAGE') {
//     // handleNewMessage(message.payload);
//   }
// });
// 
// wsService.on('error', (error) => {
//   console.error('Servisda xatolik yuz berdi:', error);
// });
// 
// wsService.on('close', () => {
//   console.log('Servis uzildi.');
// });
// 
// wsService.connect();

            

              
                Copy
              
            
          

            
// types.ts (kengaytirilgan)

// Umumiy xabar uchun interfeys
interface GenericMessage {
  type: string;
  payload: any;
}

// Xabarning ma'lum bir turga mansubligini tekshirish uchun tur himoyachisi
function isSendMessagePayload(payload: any): payload is SendMessagePayload {
  return (
    payload &&
    typeof payload.roomId === 'string' &&
    typeof payload.message === 'string'
  );
}

// Server mantiqida tur himoyachisidan foydalanish
// ... wss.on('message') ishlovchisi ichida ...

// const parsedMessage: any = JSON.parse(message);
// 
// if (parsedMessage && typeof parsedMessage.type === 'string') {
//   switch (parsedMessage.type) {
//     case 'SEND_MESSAGE':
//       if (isSendMessagePayload(parsedMessage.payload)) {
//         handleSendMessage(ws, parsedMessage.payload);
//       } else {
//         sendError(ws, 'SEND_MESSAGE uchun yaroqsiz yuklama');
//       }
//       break;
//     // ... boshqa holatlar
//   }
// } else {
//   sendError(ws, 'Yaroqsiz xabar formati');
// }

            

              
                Copy